import React from 'react';
import ReactDOM from 'react-dom';
import { scrollScreen } from 'rc-scroll-anim';
import '../Home/less/common.less';
import Nav1 from '../Home/Nav';
import Footer1 from '../Home/Footer';
import Media from 'react-media';
import MobileNav from '../Home/MobileNav';

const props = [
  // nav_1_0 区域
  {
    style: {
      position: 'fixed',
      height: '64px',
    },
    dataSource: {
      block1: {
        logo:'https://os.alipayobjects.com/rmsportal/mlcYmsRilwraoAe.svg',
        menu1:'首页',
        menu2:'案例',
        menu3:'加入我们',
        menu4:'下载',
      },
    },
  },
  // footer_1_14 区域
  {
    style: {
      height: '400px',
    },
    dataSource: {
      logo: {
        logo:'https://zos.alipayobjects.com/rmsportal/qqaimmXZVSwAhpL.svg',
        content:'A efficient motion design solutions',
      },
      block1: {
        title:'产品',
        content:'产品更新记录\nAPI文档\n快速入门\n参考指南',
        contentLink:'#\n#\n#\n#',
      },
      block2: {
        title:'关于',
        content:'FAQ\n联系我们',
        contentLink:'#\n#',
      },
      block3: {
        title:'资源',
        content:'Ant Design\nAnt Design Mobile\nAnt Cool\nAntD Library',
        contentLink:'#\n#\n#\n#',
      },
      block4: {
        title:'关注',
        content:'https://zos.alipayobjects.com/rmsportal/IiCDSwhqYwQHLeU.svg\nhttps://zos.alipayobjects.com/rmsportal/AXtqVjTullNabao.svg\nhttps://zos.alipayobjects.com/rmsportal/fhJykUTtceAhYFz.svg\nhttps://zos.alipayobjects.com/rmsportal/IDZTVybHbaKmoEA.svg',
        contentLink:'#\n#\n#\n#',
      },
      copyright: {
        content:'Copyright © 2016 The Project by <a href=\'#\'>Ant Motion</a>. All Rights Reserved',
      },
    },
  }
];

export default class Home extends React.Component {



  render() {
    const {location} = this.props;

    return (
      <div className="templates-wrapper">
      <Media query="(max-width: 959px)">
        {matches => matches ? (
          <MobileNav key="nav_1_0" name="nav_1_0" {...props[0]} />
        ) : (
          <Nav1 key="nav_1_0" name="nav_1_0" {...props[0]} defaultSelectedKeys={location.pathname} />
        )}
      </Media>
        <br/><br/><br/><br/>
        <div>
          {this.props.children}
        </div>
      <Footer1 key="footer_1_14" name="footer_1_14" {...props[1]} />
      </div>
    );
  }
}
